<template>
    <div class="table-form-page">
        <div class="form-page-header">
            <div>
                <el-page-header @back="closeWindow" content="仪器采购申请" />
            </div>
            <div>
                <el-button v-show="showSaveBtn" type="primary" @click="onSubmit">保存</el-button>
                <el-button v-show="showReviewBtn" type="primary" @click="onReview">审批</el-button>
                <el-button type="default" @click="onPrint">打印</el-button>
            </div>
        </div>
        <div class="form-content">
            <table id="devicePurchasePrint" class="table-class" border="0" cellspacing="0" cellpadding="0">
                <col class="label-col" />
                <col class="content-col" />
                <col class="label-col" />
                <col class="content-col" />
                <tr class="tr-class">
                    <td class="tab-class" colspan="4">申请信息</td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">采购部门</td>
                    <td class="td-class content-class">
                        <el-input
                            v-model="form.departmentName"
                            class="form-input-class"
                            placeholder="请选择"
                            readonly
                            @click="chooseDepartment"
                        />
                    </td>
                    <td class="td-class label-class">采购项目</td>
                    <td class="td-class content-class">
                        <el-input
                            v-model="form.projectName"
                            class="form-input-class"
                            placeholder="请选择"
                            readonly
                            @click="chooseProject"
                        />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">拟投入的项目概况</td>
                    <td class="td-class" colspan="3">
                        <el-input
                            v-model="form.projectProfile"
                            type="textarea"
                            class="form-input-class"
                            :rows="5"
                            placeholder="请输入拟投入的项目概况"
                        />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">仪器名称</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.deviceName" class="form-input-class" placeholder="请输入仪器名称" />
                    </td>
                    <td class="td-class label-class">仪器型号</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.deviceModel" class="form-input-class" placeholder="请输入仪器型号" />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">采购类型</td>
                    <td class="td-class content-class">
                        <el-select v-model="form.applyType" class="form-input-class" placeholder="请选择">
                            <el-option
                                v-for="item in applyTypeOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </td>
                    <td class="td-class label-class">采购数量</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.applyNum" class="form-input-class" placeholder="请输入采购数量" />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">备注</td>
                    <td class="td-class" colspan="3">
                        <el-input
                            v-model="form.remark"
                            type="textarea"
                            class="form-input-class"
                            :rows="5"
                            placeholder="请输入备注"
                        />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="tab-class" colspan="4">审批流程</td>
                </tr>
                <tr id="purchaseIgnore1" class="tr-class">
                    <td class="td-class" colspan="4">
                        <FlowCpt
                            ref="processRef"
                            :flowType="form.flowTypeCode"
                            :disabled="!showSaveBtn"
                            :taskId="id"
                        ></FlowCpt>
                        <FlowOperationCpt
                            v-if="showReviewDialog"
                            :data="form"
                            @close="closeReviewDialog"
                        ></FlowOperationCpt>
                    </td>
                </tr>
                <tr class="tr-class" v-if="showFlowHis">
                    <td class="tab-class" colspan="4">审批记录</td>
                </tr>
                <tr class="tr-class" v-if="showFlowHis">
                    <td class="td-class" colspan="4">
                        <FlowHistoryCpt :taskId="id" />
                    </td>
                </tr>
            </table>
        </div>
        <el-dialog
            width="400px"
            top="20vh"
            title="部门"
            v-model="showDepartment"
            :lock-scroll="true"
            :close-on-click-modal="false"
        >
            <div class="tree-dialog-content">
                <department-tree @select="departmentSelected"></department-tree>
            </div>
        </el-dialog>
        <el-dialog
            width="800px"
            top="10vh"
            title="项目"
            v-model="showProjectGridCpt"
            :lock-scroll="true"
            :close-on-click-modal="false"
        >
            <div class="dialog-content">
                <ProjectGridCpt @select="projectSelected"></ProjectGridCpt>
            </div>
        </el-dialog>
        <el-dialog
            width="840px"
            top="10vh"
            title="打印预览"
            v-model="showPrint"
            :lock-scroll="true"
            :close-on-click-modal="false"
            :destroy-on-close="true"
        >
            <PrintTemplate :id="form.id"></PrintTemplate>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import http from '@/http.js'
import DepartmentTree from '@/components/bas/DepartmentTree.vue'
import ProjectGridCpt from '@/components/pub/ProjectGridCpt.vue'
import PrintTemplate from '@/print/yunying/DevicePurchasePrint.vue'
import FlowCpt from '@/components/process/FlowCpt.vue'
import FlowOperationCpt from '@/components/process/FlowOperationCpt.vue'
import FlowHistoryCpt from '@/components/process/FlowHistoryCpt.vue'

const props = defineProps({
    id: {
        type: String,
        default: ''
    }
})

const emit = defineEmits(['close'])

const processRef = ref(null)

const form = reactive({
    id: '',
    departmentId: '',
    departmentCode: '',
    departmentName: '',
    projectId: '',
    projectCode: '',
    projectName: '',
    projectProfile: '',
    applyType: 0,
    deviceName: '',
    deviceModel: '',
    applyNum: '',
    remark: '',
    flowTypeCode: 'DEVICE_PURCHASE',
    processData: []
})

const applyTypeOption = ref([
    {
        label: '采购',
        value: 0
    },
    {
        label: '租赁',
        value: 1
    }
])

const showDepartment = ref(false)

const showProjectGridCpt = ref(false)
const showSaveBtn = ref(false)
const showReviewBtn = ref(false)
const showReviewDialog = ref(false)
const showFlowHis = ref(false)
const showPrint = ref(false)

const closeWindow = () => {
    emit('close')
}

const loadDetail = () => {
    http.fetchForm({
        url: '/yunying/devicePurchase/findById',
        method: 'get',
        data: {
            id: props.id
        }
    }).then((res) => {
        let data = res.data
        Object.assign(form, data)

        // 显示保存按钮条件
        let currentUser = localStorage.getItem('username')
        if (data.state == 0 && data.createBy === currentUser) {
            showSaveBtn.value = true
        } else {
            showSaveBtn.value = false
        }
        // 显示审批按钮条件
        if (data.state != 0 && data.handler === currentUser) {
            showReviewBtn.value = true
        } else {
            showReviewBtn.value = false
        }
        // 显示流程历史
        showFlowHis.value = true
    })
}

const onSubmit = () => {
    let params = form
    let processData = processRef.value.processList
    let allowSub = true
    for (let i = 0; i < processData.length; i++) {
        if (processData[i].handler == '') {
            allowSub = false
            break
        }
    }
    if (!allowSub) {
        ElNotification({
            title: '提示',
            message: '请选择审核人员',
            type: 'info'
        })
        return
    }
    params['flowList'] = processData
    http.fetchJson({
        url: '/yunying/devicePurchase/save',
        data: params
    }).then((res) => {
        ElNotification({
            title: '提示',
            message: '保存成功',
            type: 'success'
        })
        closeWindow()
    })
}

const chooseDepartment = () => {
    showDepartment.value = true
}

const departmentSelected = (res) => {
    form.departmentId = res.id
    form.departmentCode = res.code
    form.departmentName = res.label
    showDepartment.value = false
}

const chooseProject = () => {
    showProjectGridCpt.value = true
}

const projectSelected = (res) => {
    let info = res[0]
    form.projectId = info.id
    form.projectCode = info.code
    form.projectName = info.name
    showProjectGridCpt.value = false
}

const onReview = () => {
    showReviewDialog.value = true
}

const closeReviewDialog = (refresh) => {
    showReviewDialog.value = false
    if (refresh) {
        loadDetail()
    }
}

const onPrint = () => {
    showPrint.value = true
}

onMounted(() => {
    if (props.id != '') {
        loadDetail()
    } else {
        showSaveBtn.value = true
    }
})
</script>
<style scoped>
@import '@/assets/css/table-form.css';
</style>
